Day23 Follow Along Links

第23天的實作目標要做出當輸入字元，並輸出人的聲音的網頁。

首先要有兩個Web Speech API的組件，第一個為SpeechSynthesis，在SpeechSynthesis主要控制合成語音的功能，包含播放暫停等。第二個為SpeechSynthesisUtterance，主要控制合成語音的請求，在要求中包含語音的內容和資訊。

接下來建立語音的請求new SpeechSynthesisUtterance()，並輸入語音合成的發音內容。

const msg = new SpeechSynthesisUtterance();
msg.text = document.querySelector('[name="text"]').value;

首先建立speechSynthesis事件，透過事件來取得speechSynthesis.getVoices()取得何種聲音的發生內容，並把內容轉換成選項元素。

function getVoices(){
  voices = this.getVoices();
  console.log(voices);

  voicesDropdown.innerHTML = voices
    // .filter(voice => voice.lang.includes('en'))
    .map(voice =>{
      return `<option value="${voice.name}">${voice.name}(${voice.lang})</option>`
    })
    .join('')
}

speechSynthesis.addEventListener('voiceschanged', getVoices)

過來是當選項元素改變時，先判斷是否等於元素內容。

function setSpeakVoice(){
  msg.voice = voices.find(voice=> voice.name === this.value)
  toggle()
}

voicesDropdown.addEventListener('change', setSpeakVoice)

並觸發合成語音的出聲。

function toggle(startFlag = true){
  speechSynthesis.cancel()
  if (startFlag) {
    speechSynthesis.speak(msg)
  }
}

設定語音合成的音調SpeechSynthesisUtterance.pitch和速率SpeechSynthesisUtterance.rate內容。

function setOption(params) {
  msg[this.name] = this.value
  toggle()
}
options.forEach(option=> option.addEventListener('change', setOption))

設定開始和取消按鈕的事件。

speakButton.addEventListener('click', toggle)
stopButton.addEventListener('click', ()=> toggle(false))

html

<div class="voiceinator">

  <h1>The Voiceinator 5000</h1>

  <select name="voice" id="voices">
    <option value="">Select A Voice</option>
  </select>

  <label for="rate">Rate:</label>
  <input name="rate" type="range" min="0" max="3" value="1" step="0.1">

  <label for="pitch">Pitch:</label>

  <input name="pitch" type="range" min="0" max="2" step="0.1">
  <textarea name="text">Hello! I love JavaScript ?</textarea>
  <button id="stop">Stop!</button>
  <button id="speak">Speak</button>

</div>

Javascirpt

1. SpeechSynthesis
   SpeechSynthesis是控制語音的功能，被用來取得在設備使用合成語音的資訊。
   The SpeechSynthesis interface of the Web Speech API is the controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.

   1. SpeechSynthesis.getVoices()
      getVoices()方法是取得在設備能夠使用的合成語音的名單。
      The getVoices() method of the SpeechSynthesis interface returns a list of SpeechSynthesisVoice objects representing all the available voices on the current device.

   2. SpeechSynthesis.speak()
      speak()方法是發生合成語音。
      The speak() method of the SpeechSynthesis interface adds an utterance to the utterance queue; it will be spoken when any other utterances queued before it have been spoken.

   3. SpeechSynthesis.cancel()
      cancel()方法是取消發出合成語音。
      The cancel() method of the SpeechSynthesis interface removes all utterances from the utterance queue.

2. SpeechSynthesisUtterance
   SpeechSynthesisUtterance代表語音合成語音的請求，內容包含語音的內容和資訊。
   The SpeechSynthesisUtterance interface of the Web Speech API represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)

   1. SpeechSynthesisUtterance.text
      text屬性為設定或取得合成語音的述說文字內容。
      The text property of the SpeechSynthesisUtterance interface gets and sets the text that will be synthesised when the utterance is spoken.

   2. SpeechSynthesisUtterance.voice
      voice屬性為合成語音的發聲。
      The voice property of the SpeechSynthesisUtterance interface gets and sets the voice that will be used to speak the utterance.

   3. SpeechSynthesisUtterance.pitch
      voice屬性為合成語音的音調。
      The pitch property of the SpeechSynthesisUtterance interface gets and sets the pitch at which the utterance will be spoken at.

   4. SpeechSynthesisUtterance.rate
      rate屬性為合成語音的說話速率。
      The rate property of the SpeechSynthesisUtterance interface gets and sets the speed at which the utterance will be spoken at.

3. voiceschanged
   voiceschanged事件是當SpeechSynthesis.getVoices()改變時被觸發。
   The voiceschanged event of the Web Speech API is fired when the list of SpeechSynthesisVoice objects that would be returned by the SpeechSynthesis.getVoices() method has changed (when the voiceschanged event fires.)

4. Function.prototype.bind()
   bind() 方法，會建立一個新函式。該函式被呼叫時，會將 this 關鍵字設為給定的參數，並在呼叫時，帶有提供之前，給定順序的參數。
   The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

tags: SpeechSynthesis、SpeechSynthesisUtterance